<!-- 模拟考试 -->
<template>
	<view style="padding-bottom: 150rpx;">
		<page-head :title="'模拟考试'" :gourl="'2'" @closepage="closepage" :headtype="2"></page-head>
		<view class="expapertop">
			<view class="expapertmain marginAuto flex">
				<view class="expapertl">
					<text style="font-size:40rpx;">{{ currentindex+1 }}/</text>
					<text style="font-size:30rpx;">{{ alldata.length }}</text>
				</view>
				<view class="expapertc flex">
					<uv-icon name="clock" color="#222222" size="18"></uv-icon>
					<view class="expapertctime" style="margin-left:10rpx;margin-top:5rpx;">
						<uv-count-down @finish="answerendfun" :time="45 * 60 * 1000" format="mm分ss秒"></uv-count-down>
					</view>
				</view>
				<view class="expapertr" @click="collectfun()">
					<uv-icon v-if="!iscollect" name="star" color="#999999" size="24"></uv-icon>
					<uv-icon v-if="iscollect" name="star-fill" color="#0089FB" size="24"></uv-icon>
				</view>
			</view>
		</view>
		<view class="topic marginAuto">
			<view class="topicse mainBg baiColor" v-if="topic.answer == '对' || topic.answer == '错'">判断</view>
			<view class="topicse mainBg baiColor" v-else>{{ topic.answer.length <= 1 ? '单选':'多选' }}</view>
			<view class="topicpro">{{ topic.question }}</view>
			<view class="topicimg" v-if="topic.pic">
				<image :src="topic.pic" mode="widthFix"></image>
			</view>
			<view class="topicselectall">
				<block v-if="topic.answer == '对' || topic.answer == '错'">
					<view class="topicselecteach flex" @click="selectanswerfun('对')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">A</text>
							</view>
							<view class="topicselecteachtxt">对</view>
						</block>
						<block v-if="topic.answer == '对' && answerac != ''">
							<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
							<view class="topicselecteachtxt mainColor">对</view>
						</block>
						<block v-if="topic.answer != '对' && answerac != ''">
							<block v-if="answerac == '对'">
								<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
								<view class="topicselecteachtxt mainred">对</view>
							</block>
							<block v-if="answerac != '对'">
								<view class="topicselecteachicon flex">
									<text class="marginAuto">A</text>
								</view>
								<view class="topicselecteachtxt">对</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('错')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">B</text>
							</view>
							<view class="topicselecteachtxt">错</view>
						</block>
						<block v-if="topic.answer == '错' && answerac != ''">
							<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
							<view class="topicselecteachtxt mainColor">错</view>
						</block>
						<block v-if="topic.answer != '错' && answerac != ''">
							<block v-if="answerac == '错'">
								<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
								<view class="topicselecteachtxt mainred">错</view>
							</block>
							<block v-if="answerac != '错'">
								<view class="topicselecteachicon flex">
									<text class="marginAuto">B</text>
								</view>
								<view class="topicselecteachtxt">错</view>
							</block>
						</block>
					</view>
				</block>
				<block v-if="topic.answer == 'A' || topic.answer == 'B' || topic.answer == 'C' || topic.answer == 'D'">
					<view class="topicselecteach flex" @click="selectanswerfun('A')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">A</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option1.slice(2) }}</view>
						</block>
						<block v-if="topic.answer == 'A' && answerac != ''">
							<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
							<view class="topicselecteachtxt mainColor">{{ topic.option1.slice(2) }}</view>
						</block>
						<block v-if="topic.answer != 'A' && answerac != ''">
							<block v-if="answerac == 'A'">
								<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
								<view class="topicselecteachtxt mainred">{{ topic.option1.slice(2) }}</view>
							</block>
							<block v-if="answerac != 'A'">
								<view class="topicselecteachicon flex">
									<text class="marginAuto">A</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option1.slice(2) }}</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('B')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">B</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option2.slice(2) }}</view>
						</block>
						<block v-if="topic.answer == 'B' && answerac != ''">
							<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
							<view class="topicselecteachtxt mainColor">{{ topic.option2.slice(2) }}</view>
						</block>
						<block v-if="topic.answer != 'B' && answerac != ''">
							<block v-if="answerac == 'B'">
								<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
								<view class="topicselecteachtxt mainred">{{ topic.option2.slice(2) }}</view>
							</block>
							<block v-if="answerac != 'B'">
								<view class="topicselecteachicon flex">
									<text class="marginAuto">B</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option2.slice(2) }}</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('C')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">C</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option3.slice(2) }}</view>
						</block>
						<block v-if="topic.answer == 'C' && answerac != ''">
							<uv-icon name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
							<view class="topicselecteachtxt mainColor">{{ topic.option3.slice(2) }}</view>
						</block>
						<block v-if="topic.answer != 'C' && answerac != ''">
							<block v-if="answerac == 'C'">
								<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
								<view class="topicselecteachtxt mainred">{{ topic.option3.slice(2) }}</view>
							</block>
							<block v-if="answerac != 'C'">
								<view class="topicselecteachicon flex">
									<text class="marginAuto">C</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option3.slice(2) }}</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('D')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">D</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option4.slice(2) }}</view>
						</block>
						<block v-if="topic.answer == 'D' && answerac != ''">
							<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
							<view class="topicselecteachtxt mainColor">{{ topic.option4.slice(2) }}</view>
						</block>
						<block v-if="topic.answer != 'D' && answerac != ''">
							<block v-if="answerac == 'D'">
								<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
								<view class="topicselecteachtxt mainred">{{ topic.option4.slice(2) }}</view>
							</block>
							<block v-if="answerac != 'D'">
								<view class="topicselecteachicon flex">
									<text class="marginAuto">D</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option4.slice(2) }}</view>
							</block>
						</block>
					</view>
				</block>
				<!-- 多选 -->
				<block v-if="topic.answer.length > 1">
					<view class="topicselecteach flex" @click="selectanswerfun('A')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">A</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option1.slice(2) }}</view>
						</block>
						<block v-if="answerac != ''">
							<block v-if="answerac.includes('A')">
								<block v-if="errx.includes('A-')">
									<!-- 结果展示 -->
									<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
									<view class="topicselecteachtxt mainred">{{ topic.option1.slice(2) }}</view>
								</block>
								<block v-else>
									<!-- 选择展示 -->
									<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
									<view class="topicselecteachtxt mainColor">{{ topic.option1.slice(2) }}</view>
								</block>
							</block>
							<block v-else>
								<view class="topicselecteachicon flex">
									<text class="marginAuto">A</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option1.slice(2) }}</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('B')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">B</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option2.slice(2) }}</view>
						</block>
						<block v-if="answerac != ''">
							<block v-if="answerac.includes('B')">
								<block v-if="errx.includes('B-')">
									<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
									<view class="topicselecteachtxt mainred">{{ topic.option2.slice(2) }}</view>
								</block>
								<block v-else>
									<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
									<view class="topicselecteachtxt mainColor">{{ topic.option2.slice(2) }}</view>
								</block>
							</block>
							<block v-else>
								<view class="topicselecteachicon flex">
									<text class="marginAuto">B</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option2.slice(2) }}</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('C')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">C</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option3.slice(2) }}</view>
						</block>
						<block v-if="answerac != ''">
							<block v-if="answerac.includes('C')">
								<block v-if="errx.includes('C-')">
									<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
									<view class="topicselecteachtxt mainred">{{ topic.option3.slice(2) }}</view>
								</block>
								<block v-else>
									<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
									<view class="topicselecteachtxt mainColor">{{ topic.option3.slice(2) }}</view>
								</block>
							</block>
							<block v-else>
								<view class="topicselecteachicon flex">
									<text class="marginAuto">C</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option3.slice(2) }}</view>
							</block>
						</block>
					</view>
					<view class="topicselecteach flex" @click="selectanswerfun('D')">
						<block v-if="answerac == ''">
							<view class="topicselecteachicon flex">
								<text class="marginAuto">D</text>
							</view>
							<view class="topicselecteachtxt">{{ topic.option4.slice(2) }}</view>
						</block>
						<block v-if="answerac != ''">
							<block v-if="answerac.includes('D')">
								<block v-if="errx.includes('D-')">
									<uv-icon name="close-circle-fill" color="#FC2A2A" size="22"></uv-icon>
									<view class="topicselecteachtxt mainred">{{ topic.option4.slice(2) }}</view>
								</block>
								<block v-else>
									<uv-icon  name="checkmark-circle-fill" color="#0089FB" size="22"></uv-icon>
									<view class="topicselecteachtxt mainColor">{{ topic.option4.slice(2) }}</view>
								</block>
							</block>
							<block v-else>
								<view class="topicselecteachicon flex">
									<text class="marginAuto">D</text>
								</view>
								<view class="topicselecteachtxt">{{ topic.option4.slice(2) }}</view>
							</block>
						</block>
					</view>
				</block>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;" v-if="topic.answer.length > 1">
			<uv-button text="提交" @click="enteronefun()" :customStyle="{
				'background':'#0089FB',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
		<view class="analyze marginAuto" v-if="isexplain">
			<view class="analyzeeach">
				<view class="analyze-title">本题答案</view>
				<view class="analyze-txt">{{ topic.answer }}</view>
			</view>
			<view class="analyzeeach">
				<view class="analyze-title">本题解析</view>
				<view class="analyze-txt">{{ topic.explain }}</view>
			</view>
		</view>
		<view class="footerfun flex">
			<view class="ffuneach flex" style="width:55%;">
				<view class="ffuneachbtn mainBg baiColor" @click="nextquefun()">下一题</view>
				<view class="ffuneachbtn mainBg baiColor" @click="paperopenenter()">交卷</view>
			</view>
			<view class="ffuneach ffuneachr  flex" style="width:45%;">
				<view class="ffuneachdata">
					<view class="ffuneachdnum" style="color:#07D31B;">{{ successarr.length }}</view>
					<view class="ffuneachdtxt">答对</view>
				</view>
				<view class="ffuneachdata">
					<view class="ffuneachdnum" style="color:#FC2A2A;">{{ errarr.length }}</view>
					<view class="ffuneachdtxt">答错</view>
				</view>
				<view class="ffuneachdata">
					<view class="ffuneachdnum" style="color:#333333;">{{  parseInt(errarr.length*100/alldata.length) }}%</view>
					<view class="ffuneachdtxt">答错</view>
				</view>
			</view>
		</view>
		<uv-popup ref="backpop" round="30">
			<view class="backpop">
				<image class="backpopbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="backpoptitle marginAuto">您还未完成考试，确定现在返回放弃考试吗？</view>
				<view class="backpopbtn flex">
					<view class="backpopbtneach mainColor" style="border: 1px solid #1686F8;" @click="$refs.backpop.close()">取消</view>
					<view class="backpopbtneach mainBg baiColor" @click="backenter">确定</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="paperpop" round="30">
			<view class="backpop">
				<image class="backpopbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="backpoptitle marginAuto">确定要交卷吗？</view>
				<view class="backpoptxt">未做题目{{ nonum }}题</view>
				<view class="backpopbtn flex">
					<view class="backpopbtneach mainColor" style="border: 1px solid #1686F8;" @click="paperenterfun()">交卷</view>
					<view class="backpopbtneach mainBg baiColor" @click="$refs.paperpop.close()">继续答题</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				type:'',
				subject:'',
				iscollect:false,
				alldata:[
				// 	{
				// 	answer: "A,B,D",
				// 	chapter:"典型事故案例分析",
				// 	create_time: "2025-02-06 14:16:27",
				// 	explain: "本题主要考察实际",
				// 	id: 2929,
				// 	option1: "A、超速行驶",
				// 	option2: "B、不按规定会车",
				// 	option3: "C、疲劳驾驶",
				// 	option4: "D、不按规定使用灯光",
				// 	pic: null,
				// 	question: "周某夜间驾驶大货车在没有路灯的城市道路上以90公里/小时的速度行驶",
				// 	subject: 4,
				// 	type: "C1,C2,C3",
				// 	update_time: "2025-02-06 14:16:27",
				// },
				],
				currentindex:0,
				topic:{
					answer:'',
					option1:'',
					option2:'',
					option3:'',
					option4:''
				},
				answerac:'',
				isexplain:false,
				collectarr:[],
				successarr:[],  // 正确id
				errarr:[],   // 错误id
				nonum:0,
				// 多选
				answeracarr:[],
				errx:''
			};
		},
		onLoad(option) {
			this.type = option.type;
			this.subject = option.subject;
			this.initData();
			this.getcollectfun()
		},
		methods: {
			selectanswerfun(ans){
				if(!this.isexplain){  // 展示解析的时候不可点击其他选项
					if(this.topic.answer.length <= 1){  // 单选
						this.answerac = ans;
						if(ans != this.topic.answer){
							this.isexplain = true;
							this.errarr.push(this.topic.id)
						}else{
							this.isexplain = false;
							this.successarr.push(this.topic.id)
							setTimeout(()=>{
								this.nextquefun()
							},300)
						}
					}else {
						if(this.answeracarr.find(item => item == ans)){
							this.answeracarr = this.answeracarr.filter(item => item != ans)
						}else{
							this.answeracarr.push(ans)
						}
						this.answerac = this.answeracarr.toString();
					}
				}
			},
			enteronefun(){  // 确认提交本题
				if(this.answerac != this.topic.answer){
					let answerac = this.answerac.split(',');
					let answer = this.topic.answer.split(',');
					let ylarr = [];
					answerac.forEach((item,index)=>{
						if(this.topic.answer.indexOf(item) < 0){
							ylarr.push(item+'-')
						}
					});
					this.errx = ylarr.toString();
					this.isexplain = true;
				}else{
					this.nextquefun()
				}
			},
			answerendfun(){  // 答题结束交卷
				let sendData = {
					type:this.type,
					subject:this.subject,
					correct:this.successarr.length,
					error:this.errarr.length,
					error_topic_ids:this.errarr.toString(),// 错题id
				};
				this.apifun.unirequest('/api/topic/submitTopic','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.paperpop.close();
						uni.setStorageSync('ksresult', {
							successnum:this.successarr.length,
							errnum:this.errarr.length,
							nonum:this.nonum || 0,
							alldatanum:this.alldata.length
						});
						this.apifun.navigate('/pages/driving/ksresult');
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			collectfun(){  // 收藏
				let sendData = {
					topic_id:this.topic.id
				}
				this.apifun.unirequest('/api/topic/collect','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						let iscoll = this.collectarr.find(item => item == this.topic.id)
						if(!!iscoll){
							this.collectarr = this.collectarr.filter(item => item != this.topic.id)
							this.iscollect = false;
						}else{
							this.collectarr.push(this.topic.id)
							this.iscollect = true
						}
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			paperopenenter(){  // 未做完交卷打开pop
				if(this.currentindex+1 < this.alldata.length){
					this.nonum = this.alldata.length - this.successarr.length - this.errarr.length;
					this.$refs.paperpop.open()
				}
			},
			paperenterfun(){  // 未做完交卷
				this.answerendfun()
			},
			nextquefun(){  // 下一题
				if(this.answerac == ''){
					this.apifun.toast('此题尚未作答');
					return false
				};
				if(this.currentindex+1 >= this.alldata.length){
					this.apifun.toast('答题结束；请点击交卷');
					return false
				}
				this.answerac = '';
				this.isexplain = false;
				this.answeracarr = [];  // 多选
				this.errx = '';  // 多选
				
				this.currentindex++
				this.topic = this.alldata[this.currentindex];
			},
			initData(){
				let sendData = {
					type:this.type,
					subject:this.subject,
				};
				this.apifun.unirequest('/api/topic/getPracticeTestList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.alldata = datas;
						if(this.currentindex <= 0){
							this.topic = this.alldata[this.currentindex];
						}
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getcollectfun(){
				let sendData = {
					type:this.type,
					subject:this.subject,
				};
				this.apifun.unirequest('/api/topic/getCollectTopicIdArr','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.collectarr = datas
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			closepage(){  // 返回
				this.$refs.backpop.open();
			},
			backenter(){
				uni.navigateBack({
					delta: 1
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.mainred{
		color: #FC2A2A !important;
	}
	// 时间、题数量
	.expapertop{
		position: sticky;
		width: 100%;
		background: #F7F7F7;
		padding: 20rpx 0;
		.expapertmain{
			width: 690rpx;
			justify-content: space-between;
			.expapertl{
				color:#333333;
			}
			.expapertc{
				color: #222222;
				font-size: 32rpx;
				line-height: 50rpx;
			}
			.expapertr{}
		}
	}
	// 题目
	.topic{
		width: 630rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		.topicse{
			display: inline-block;
			padding:0 20rpx;
			line-height: 60rpx;
			border-radius: 100rpx;
			font-size:32rpx;
		}
		.topicpro{
			margin-top: 30rpx;
			color: #222222;
			font-size: 30rpx;
			line-height: 50rpx;
		}
		.topicimg{
			width: 100%;
			margin:20rpx auto 0;
			image{
				width: 100%;
			}
		}
		.topicselectall{
			.topicselecteach{
				margin-top:40rpx;
				.topicselecteachicon{
					width:40rpx;
					height:40rpx;
					border: 1px solid #E7E7E7;
					color:#9E9E9E;
					font-size: 30rpx;
					border-radius:50%;
					background: #fff;
				}
				.topicselecteachtxt{
					margin-left:15rpx;
					line-height:50rpx;
					color: #333333;
					font-size: 30rpx;
				}
			}
		}
	}
	// 解析
	.analyze{
		width: 640rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.analyzeeach{
			margin-top: 20rpx;
			.analyze-title{
				color: #222222;
				font-size: 34rpx;
				line-height: 60rpx;
				font-weight: 600;
			}
			.analyze-txt{
				color: #666666;
				font-size: 28rpx;
			}
		}
	}
	// 底部功能
	.footerfun{
		position: fixed;
		bottom: 0;
		width:96%;
		padding: 10rpx 2%;
		background: #fff;
		.ffuneach{
			height: 80rpx;
			justify-content: space-between;
			.ffuneachbtn{
				width: 190rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 100rpx;
				text-align: center;
			}
		}
		.ffuneachr{
			.ffuneachdata{
				width: 30%;
				text-align: center;
				.ffuneachdnum{
					font-size: 28rpx;
					line-height: 40rpx;
				}
				.ffuneachdtxt{
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
		}
	}
	// popup
	.backpop{
		position: relative;
		width: 600rpx;
		height: 416rpx;
		.backpopbg{
			position: absolute;
			top: 0;
			left: 0;
			width: 600rpx;
			height: 416rpx;
			border-radius:10rpx;
		}
		.backpoptitle{
			position: relative;
			width:90%;
			padding-top: 80rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			color: #064155;
			text-align: center;
			font-weight: 600;
		}
		.backpoptxt{
			position: relative;
			color: #08799F;
			font-size: 30rpx;
			text-align: center;
			line-height: 60rpx;
		}
		.backpopbtn{
			position: absolute;
			bottom:40rpx;
			left: 50%;
			width: 90%;
			margin-left: -45%;
			justify-content: space-between;
			.backpopbtneach{
				width: 240rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 100rpx;
			}
		}
	}
</style>